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My name is Nacho Martin. 

I write code at Limenius 

We build tailor-made projects. 

Almost every project needs a rich frontend, 
for one reason or another. 



So we have been thinking about this for some time. 



Why (as a PHP developer) should I 

care about the frontend? 


























What is React.js? 



The fundamental premise 


How to cook an omelette 


Buy eggs 



Break eggs 



Pour eggs in the pan 


















































The fundamental premise 


How to cook an omelette 


Buy eggs 



Break eggs 



Beat eggs 



Pour eggs in the pan 
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The fundamental premise 

Options: 

1: Re-render everything. Simple 

2: Find in the DOM where to 

insert elements, what to move. Complex 

what to remove... 


Not efficient 


Efficient 


React allows us to do 1, although it does 2 behind the scenes 


The fundamental premise 


Give me a state and a render() method that depends 
on it and forget about how and when to render. 


The fundamental premise 


Give me a state and a render() method that depends 
on it and forget about how and when to render. 


* Unless you want more control, which is possible. 


Our first component 


Click me! 


Clicks: 0 




Our first component 


Click me! 


Clicks: 1 




Our first component 

import React, { Component } from react'; 

class Counter extends Component { 
constructor(props) { 
super (props); 
this. state = {count: 1}; 

} 

tick() { 

this .setState({count: this .state.count + 1}); 

} 

render() { 
return ( 

<div className="App"> 

<button onClick={this .tick.bind (this )}>Click me!</button> 
<span>Clicks : {this .state. count}</span> 

</div> 

); 

} 

} 


export default Counter; 



import React, { Component } from ’react'; 



i class | Counter extends Component { 


constructor(props) { 
super (props); 
this. state = {count: 1}; 

} 


ES6 Syntax (optional but great) 


tick() { 

this .setState({count: this .state.count + 1}); 

} 


} 


render() { 
return ( 

<div className= 'App"> 

<button onClick={this .tick.bind (this )}>Click me!</button> 
<span>Clicks : {this .state. count}</span> 

</div> 



export default Counter; 




import React, { Component } from react ; 

' " " “ __ 

i class |Counter extends Component { 
constructor(props) { 

super (props ); ______ — - 

■this. state = {count: 1}; i 

} . 


ES6 Syntax (optional but great) 
.* Initial state 


tick() { 

this .setState({count: this .state.count + 1}); 

} 


} 


render() { 
return ( 

<div className= 'App"> 

<button onClick={this .tick.bind (this )}>Click me!</button> 
<span>Clicks : {this .state. count}</span> 

</div> 



export default Counter; 






import React, { Component } from react ; 

' " " “ __ 

i class |Counter extends Component { 
constructor(props) { 

super (props ); ______ — - 

■this. state = {count: 1}; i 

} . 


ES6 Syntax (optional but great) 
.* Initial state 


^tick() { 

i this .setState({count: this .state.count + 1}); 

■ } 


--►Set new state 


} 


render() { 
return ( 

<div className= App"> 

<button onClick={this .tick.bind (this )}>Click me!</button> 
<span>Clicks : {this .state. count}</span> 

</div> 



export default Counter; 







Our first component 


import React, { Component } from ’react'; 


__ 


i class |Counter extends Component { 
constructor(props) { 

super (props); , 

■this. state = {count: 1}; 

} . 


ES6 Syntax (optional but great) 


Initial state 


tick() { 

this .setState({count: this .state.count + 1}); 

} 


--►Set new state 


render() { 
return ( 

<div className= 'App"> 

<button onClick={this .tick.bind (this )}>Click me!</button> 
<span>Clicks : {this .state. count}</span> 

</div> 

); 

} 


} 


export default Counter; 


render(), called by React 











Working with state 


Working with state 

Initial state 

constructor(props) { 
super (props); 
this. state = {count 

> 




Working with state 

Initial state 

constructor(props) { 
super (props); 
this. state = {count: 1}; 

> 

Assign state 


this .setState({count: this .state.count + 1}); 



Working with state 

Initial state 

constructor(props) { 
super (props); 
this. state = {count: 1}; 

> 

Assign state 

this .setState({count: this .state.count + 1}); 


Just remember: avoid this 


this .state.count = this .state.count + 1; 



render and JSX 


render() { 
return ( 

<div className="App"> 

<button onClick={this .tick.bind (this ) }>Clicame!</button> 
<span>Clicks : {this .state. count}</span> 

</div> 

)? 


It is not HTML, it is JSX. 

React transforms it internally to HTML elements. 


Good practice: make renderQ as clean as possible, only a return. 


render and JSX 


render() { 

return ( ***** 

<div jclassNam^= *App"> 


....►Some things change 


<button onClick={this .tick.bind (this )}>Clicame !</button> 
<span>Clicks : {this .state. count}</span> 

</div> 

); 


It is not HTML, it is JSX. 

React transforms it internally to HTML elements. 

Good practice: make renderQ as clean as possible, only a return. 



render and JSX 


render() { 


Some things change 


return ( **** 

<div jclassNam^= 'App '> 

<button onClick=^thi^. tick i bind( this )}>Clicame !</button> 
<span>Clicks : £this_. state .^:ounti}</span> 


</div> 


) 


We can insert JS expressions between {} 


It is not HTML, it is JSX. 

React transforms it internally to HTML elements. 

Good practice: make renderQ as clean as possible, only a return. 




Thinking in React 


render() { 


return ( 

<div className= 'App"> 

<button onClick={this . 
<span>Clicks : {this.st 
</div> 

)? 

} 


tick.bind (this )}>Click me!</button> 
ate.count }</span> 


Thinking in React 


render() { 

Here we don't modify state 

return ( 

<div className= App" > 

<button onClick={ this .tick.bind (this )}>Click me !</button> 
<span>Clicks : {this .state.count }</span> 

</div> 

)? 


} 


Thinking in React 


render() { 

Here we don't make Ajax calls 

return ( 

<div className= App" > 

<button onClick={ this .tick.bind (this )}>Click me !</button> 
<span>Clicks : {this .state.count }</span> 

</div> 

)? 


} 


Thinking in React 


render() { 

Here we don't calculate decimals of PI and send an e-mail 
with the result 

return ( 

<div className= App" > 

<button onClick={ this .tick.bind (this )}>Click me !</button> 
<span>Clicks : {this .state.count }</span> 

</div> 

)? 


} 


Important: think our hierarchy 


Search... 

J Only show products in stock 

Name Price 
Sporting Goods 

Football $49.99 
Baseball $9.99 
Basketball $29.99 
Electronics 
iPod Touch $99.99 
iPhone 5 $399.99 

Nexus 7 $199.99 





j Only show products in stock 


Name Price 
Sporting Goods 


Football 

$49.99 

Baseball 

$9.99 

Basketball $29.99 


Electronics 


iPod Touch $99.99 

iPhone 5 

$399.99 

Nexus 7 

$199.99 






































Component hierarchy: props 

class CounterGroup extends Component { 
render() { 
return ( 

<div> 

<Counter name= amigo "/> 
<Counter name= senor"/> 
</div> 

); 

} 

} 


Component hierarchy: props 

class CounterGroup extends Component { 
render() { 
return ( 

<div> 

<Counter name= amigo "/> 
<Counter name= senor"/> 
</div> 

); 

} 

} 

.and in Counter... 


render() { 
return ( 

<div className= 'App"> 

<button onClick={this .tick.bind (this ) }> 
Click me! {this .props.name} 

</button> 

<span>Clicks : {this .state. count}</span> 

</div> 

); 


} 




Component hierarchy: props 

class CounterGroup extends Component { 
render() { 
return ( 

<div> 

<Counter iname= amigo " /> 
<Counter name= sencS; ■/> 
</div> 


.and in Counter...;. 

I 

render() { ! 

return ( / 

<div className= "App"> / 

<button onClick={this . tjlek. bind (this ) }> 
Click mei v this .props.name} ■ 
</button> 

<span>Clicks : {this .state. count}</span> 

</div> 

); 

} 







Pro tip: Stateless components 


const Greeter = (props) => ( 

<div> 

<div>Hi {props.name} !</div> 
</div> 

) 


Tip: Presentational and Container components 


class TasksListContainer extends React.Component { 
constructor(props) { 

super(props) 
this.state = {tasks: []} 

} 

component L dMount() { 

// Load data with Ajax and whatnot 

} 

render() { 

return <TaskL 1st tasks={this.state.tasks}/> 

} 

} 


const TaskList = (props) => ( 

<div> 

{props.tasks.map((task, idx) => { 

<div key={idx}>{task.name}</div> 

})} 

</div> 

) 



Everything depends on the state, therefore we can: 
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Everything depends on the state, therefore we can: 


•Reproduce states, 
•Rewind, 

• Log state cha nges, 
•Make storybooks. 



Learn once, 
write everywhere 



What if instead of this 


render() { 
return ( 

<div className= 'App"> 

<button onClick={ this .tick.bind (this )}>Click me !</button> 
<span>Clicks : {this .state.count }</span> 

</div> 




we have something like this? 

render () { 
return ( 

<View> 

<ListView 

dataSource={ dataSource} 
renderRow= {(rowData) => 

<TouchableOpacity > 

<View> 

<Text>{ rowData. name}</Text> 

<View> 

<SwitchIOS 

onValueChange={ (value) => 

this .setMissing(item, 
value={item. missing} /> 

</View> 

</View> 

</TouchableOpacity> 

} 

/> 

</View> 

); 


value)} 


...we have something like this? 


render () { 
return ( 

<View> 



</TouchableOpacity> 

} 


/> 

</View> 

); 


} 


React Targets 


• Web - react-dom 

• Mobile - react-native 

• Gl shaders - gl-react 

• Canvas - react-canvas 

• Terminal - react-blessed 



00:35 02:35 04:35 05:35 03:35 10:35 12:35 


Transact ions Pci Second 


Action Iransactior 

SanpleTrarsactior 
vuserencTransection 
vuser init Transaction 


Total Friois 
52 i 


Avg 

Max 

Min 

4.42 

6.27 

0.10 

4.42 

6.53 

0.03 

6.11 

0.43 

0.00 

6.11 

0.36 

0.00 


Fr rors 
script 

Sample 

Sample 


message _ 

Action.c(8): Error 277G4: Failed to connect to server "example.com:80": Co 

Action.ctB): trror -27/25: Step cownloac timeout (120 secords) has expired 


count 

51 


60:00 


03:10 


06:26 


69:30 


12:40 



























Setup 



Recommended setup 



modules 

with dependencies 


webpack 

MODULE BUNDIER 


static 

assets 














































Webpack 


Pros 
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Webpack 


Pros 


• Manages dependencies 

• Allows several environments: production, development 

• Automatic page reload (even hot reload). 

• Can use preprocessors/"transpilers", like Babel. 

Cons 

• It has a non trivial learning curve. 


I maintain a sandbox: https://github.com/Limenius/symfony-react-sandbox 



Insertion 


HTML 


<div id=" react-placeholder"></div> 


JavaScript 

import ReactDOM from react-dom ; 

ReactDOM.render( 

<Counter name=" amigo">, 

document .getElementById( react-placeholder ) 

)? 


Integration with PHP 

httDs://sithub.com/Limenius/ReactRenderer 


Based on 












ReactRenderer 

JavaScript: 

import ReactOnRails from react-on-rails ; 
import RecipesApp from ./RecipesAppServer 

ReactOnRails.register({ RecipesApp }); 

Twig: 

{{ react component ( RecipesApp , { props : 


f 


props}) 


}} 


ReactRenderer 

JavaScript: 

import ReactOnRails from react-on-rails ; 
import RecipesApp from ./RecipesAppServer 

ReactOnRails.register({ RecipesApp }); 

Twig: 

{{ react_component( RecipesApp , {’props : 

i 


f 


props}) 


}} 


ReactRenderer 

JavaScript: 

import ReactOnRails from react-on-rails ; 
import RecipesApp from ./RecipesAppServer ; 

ReactOnRails.register({ RecipesApp }); 

Twig: 

{{ react_component( RecipesApp , {'props : props}) }} 

Generated HTML: 

<div class= "js-react-on-rails-component" style=" display:none" data-component-name="RecipesApp" 
data-props=" [my Array in JSON]" data-trace="f alse" data-dom-id="sfreact-57d05640f 2f la"></div> 



Server-side rendering 
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The fundamental premise 


Give me a state and a render() method that depends 
on it and forget about how and when to render. 

We can render components in the server 

• SEO friendly. 

• Faster perceived page loads. 

• We can cache. 


Client-side + Server-side 


{{ react component ( RecipesApp , 


{' props : 


TWIG 

props , i rendering' : 'both ■>>» >> 




Client-side + Server-side 


TWIG 

{{ react_component ( 'RecipesApp' , {'props' : props, i rendering' : 'both ■>>» >> 


HTML returned by the server 

<div id=" sfreact-57d05640f2f la"><div data-reactroot=" data-reactid=" 1 data-react- 
checksum="2 107256409 "><ol class="breadcrumb" data-reactid=" 2 "><li class="active" data- 
reactid="3">Recipes</li> 


</div> 





Client-side + Server-side 


TWIG 

{{ react_component ( 'RecipesApp' , {'props' : props, i rendering' : 'both ■>>» >> 


HTML returned by the server 

<div id=" sfreact-57d05640f2f la"><div data-reactroot=" data-reactid=" 1 data-react- 
checksum="2 107256409 "><ol class="breadcrumb" data-reactid=" 2 "><li class="active" data- 
reactid="3">Recipes</li> 


</div> 


An then React in the browser takes control over the component 





Universal applications: Options 



Option 1: Call a node.js subprocess 

Make a call to node.js using Symfony Process component 


* Easy (if we have node.js installed). 

* Slow. 


Library: https://github.com/nacmartin/phpexecjs 







Option 2: v8js 

Use PHP extension v8js 

* Easy (although compiling the extension and v8 is not a breeze). 

* Currently slow, maybe we could have v8 preloaded using php-pm so it 
is not destroyed after every request-response cycle. 


Library: https://github.com/nacmartin/phpexecjs 







Option 3: External node.js server 


We have "stupid" node.js server used only to render React components. 
It has <100 LoC, and it doesn't know anything about our logic. 

* "Annoying" (we have to keep it running, which is not super annoying 
either). 

* Faster. 

There is an example a dummy server for this purpose at 
https://github.com/Limenius/symfony-react-sandbox 







Options 1 & 2 


$ren derer = new PhpExecJsReactRenderer(‘path_to/server-bundle.js’); 
$ext = new ReactRenderExtension($renderer, 'both'); 

$twig->addExtension($ext); 


phpexecjs detects the presence of the extension v8js # 

if not, calls node.js 


Option 3 


$ren derer = new ExternalServerReactRenderer(‘../some_path/node.sock’); 
$ext = new ReactRenderExtension($renderer, 'both'); 


$twig->add Extension ($ext); 


The best of the two worlds 


In development use node.js or v8js with phpexecjs. 
In production use an external server. 

If we can cache server-side responses, even better. 





Sometimes yes, but it introduces 

complexity 



Redux support 

(+very brief introduction to Redux) 



Redux: a matter of state 












Redux: a matter of state 





















Redux: a matter of state 



.Hi, John 


Your name: J° hn 


state.name 


callback to change it 

.. 


save 


- 


John's stuff 





































Component 


dispatch(changeName( 'John )); 






Action 

changeName = (name) => { 
return { 

type: 'CHANGE_NAME’ , 

name 

} 

} 

* 

\ 




Component 


dispatch(changeName( 'John )); 











Action 


changeName = (name) => { 
return { 

type: 'CHANGE_NAME’ , 

name 

} 

} 

* 

\ 

\ 

\ 

% 

S 


Reducer 

const todo = (state = {name: null}, action) => { 
switch (action.type) { 
case ’CHANGEJJSER’ : 
return { 

name: action.name 

} 

} 

} 


Component 

dispatch(changeName( y John )); 















Action 


changeName = (name) => { 
return { 

type: 'CHANGE_NAME’ , 

name 

} 

} 

* 

\ 



Reducer 



const todo = (state = {name: null}, 
switch (action.type) { 
case ’CHANGEJJSER’ : 
return { 

name: action.name 

} 

} 

} 


action) => { 



Component 

dispatch(changeName( 'John )); 















Action 


changeName = (name) => { 
return { 

type: 'CHANGE_NAME’ , 

name 

} 

} 


Reducer 

const todo = (state = {name: null}, action) => { 
switch (action.type) { 
case ’CHANGEJJSER’ : 
return { 

name: action.name 

} 

} 

} 

\ 

\ 

\ 

I 

t 

Store 

* 

* 




dispatch(changeName( 'John )); 


this .props.name == 'John ; 















Actions 






deposit $10 


withdraw $10 



$0 



Dispatcher 


V V 
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CD 
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Redux with ReactRenderer 


JavaScript: 

import ReactOnRails from react-on-rails ; 
import RecipesApp from ./RecipesAppClient ; 
import recipesStore from ../store/recipesStore ; 

ReactOnRails.registerStore({recipesStore}) 
ReactOnRails.register({ RecipesApp }); 

Twig: 

{{ redux_store( recipesStore , props) }} 

{{ react component ( RecipesApp ) }} 


Sample code in 

https://github.com/Limenius/symfony-react-sandbox 







Redux with ReactRenderer 


JavaScript: 

import ReactOnRails from react-on-rails ; 
import RecipesApp from ./RecipesAppClient ; 
import recipesStore from ../store/recipesStore ; 

ReactOnRails.registerStore({recipesStore}) 
ReactOnRails.register({ RecipesApp }); 

Twig: 

{{ redux_store( recipesStore , props) }} 

{{ react_component ( RecipesApp ) }} 

{{ react component ( AnotherComponent ) }} 


Sample code in 

https://github.com/Limenius/symfony-react-sandbox 







Share store between components 











Share store between components 


React IHH React 


Twig 

Twig 

React 

React | 

IIWUW l 


By sharing store they can share state 











Forms, a special case 



Dynamic forms, why? 


•Inside of React components. 

•Important forms where UX means better conversions. 

•Very specific forms. 

•Very dynamic forms that aren't boring (see Typeform for instance). 


https ://te m p I ates .ty p ef o rm.com/to/nOkLUt 



5 -> Which types of content do you share the most?* 


i Choose as many as you like 


[a 1 Pictures 

=□ 

B News pieces 


V L..J 

Deals & coupons 

(~F~) Status updates 



fc | Articles 




Other 

[gT Quizzes 

© 




N/ 


2 of 8 answered 











































Typically PHP frameworks have a Form Component 





Initial values 
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Initial values 

Ul hints (widgets, attributes) 

Bind incoming data 

Deserialize 

Validate 


Return errors 














Typically PHP frameworks have a Form Component 

$form (e.g. Form Symfony Component) $form->createView() (helpers in other Fws not Sf) 


Initial values 

Ul hints (widgets, attributes) 

Bind incoming data 

Deserialize 

Validate 


Return errors 














Typically PHP frameworks have a Form Component 

$form (e.g. Form Symfony Component) $form->createView() (helpers in other Fws not Sf) 


Initial values Render view 

data 

Validate 


Return errors 

















Initial values 

Ul hints (widgets, attributes) 

Bind incoming data 

Deserialize 

Validate 


Render view 

Show errors after Submit 


Return errors 



















$form 


(e.g. Form Symfony Component) 


$form->createView() (helpers in other Fws not Sf) 


Render view 

Show errors after Submit 

Some client-side validation (HTML5) 


Return errors 




















Using forms in an API 

$form 

Initial values 

Ul hints (widgets, attributes) 


Bind incoming data 

Deserialize 

Validate 


Return errors 


$form->createView() (helpers in other Fws not Sf) 

Render view 

Show errors after Submit 

Some client-side validation (HTML5) 














..ana we want more 

$form 

Initial values 

Ul hints (widgets, attributes) 


Bind incoming data 

Deserialize 

Validate 


Return errors 


$form->createView() (helpers in other Fws not Sf) 

Render view 

On Submit validation 

Some client-side validation (HTML5) 














..ana we want more 

$form 

Initial values 

Ul hints (widgets, attributes) 


Bind incoming data 

Deserialize 

Validate 


Return errors 


$form->createView() (helpers in other Fws not Sf) 

Render view 

On Submit validation 

Some client-side validation (HTML5) 

On blur sync validation 















..ana we want more 

$form 

Initial values 

Ul hints (widgets, attributes) 


Bind incoming data 

Deserialize 

Validate 


Return errors 


$form->createView() (helpers in other Fws not Sf) 

Render view 

On Submit validation 

Some client-side validation (HTML5) 

On blur sync validation 
On blur async validation 
















..ana we want more 

$form 

Initial values 

Ul hints (widgets, attributes) 


Bind incoming data 

Deserialize 

Validate 


Return errors 


$form->createView() (helpers in other Fws not Sf) 

Render view 

On Submit validation 

Some client-side validation (HTML5) 

On blur sync validation 
On blur async validation 
All the dynamic goodies 

















Suppose this Symfony form 


public function buildForm(FormBuilderlnterface $builder, array $options) 

{ 

$builder 

->add('country', ChoiceType::class, [ 

'choices' => [ 

'United Kingdom' => 'gb', 

'Deutschland' => 'de', 

1 1— ~ i i 

Espana -> es, 


] 

]) 

->add('addresses', CollectionType::class, ...); 


Forms rendered to HTML 


$form->createView( ) ; 


Forms rendered to HTML 



$form->createView( ) ; 


Forms rendered to HTML 



$form->createView( ) ; 


Country: 


Addresses: 



Deutschland 


Espaha 


- Some St. 

+ 


submit 

















Forms rendered to HTML 




$ form->createView( ) ; 


Country: 


Addresses: 


Espana 


Deutschland 

Espana 


Some St. 


+ 


submit 



POST well formed 
with country:'es' 

and not 'Espana', 'espana 1 , 'spain', '0' 













Forms rendered to HTML 


$form->createView( ) ; 


-► 



Country: 


Addresses: 


Espana 

Deutschland 

Espana 


Some St. 


+ 


submit 


$form->submit ( $request ) ; 


POST well formed 
with country:'es' 

and not 'Espana', 'espana', 'spain', '0' 












Forms in APIs 


$form; 


Forms in APIs 



How do we know the visible choices or values? 


Read the docs! 




Country: 

Espana ^ 



Deutschland 


Addresses: 

Espana 




Some St. 


+ 


submit 



















Forms in APIs 


$form; 




$form->submit ( $request ) ; 


How do we know the visible choices or values? 


Read the docs! 




Country: 


Addresses: 


Espana ^ 

Deutschland 

Espana 


Some St. 


+ 


submit 


POST "I'm Feeling Lucky" 















Forms in APIs 


How do we know the visible choices or values? 



$form->submit ( $request ) ; 


POST "I'm Feeling Lucky" 





















Forms in APIs 


How do we know the visible choices or values? 



$form->submit ( $request ) ; 


POST "I'm Feeling Lucky" 

















Forms in APIs 


How do we know the visible choices or values? 

Read the docs! 


$form; 




$ form-> submit ($ request ) ; 


POST "I'm Feeling Lucky 


## 

















Forms in APIs 


How do we know the visible choices or values? 

Read the docs! 


$form; 



submit 



$ form-> submit ($ request ) ; 


POST "I'm Feeling Lucky 


## 























































































Define, maintain and keep in sync in triplicate 


Form Server 




How many devs does it take to write a form? 





Wizard type form? 



tA 1 




f.'i? 


t Oieia 


&> NT <- F 1(0 i 
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"While you code this 
we will be preparing 
different versions for 
other use cases" 


































































































































































Case: Complex Wizard Form 


SEXO 










Case: Complex Wizard Form 


^ALGIINO DE ESTOS ESTADOS FISIOLOGICOS? 



Ninguno 




Menopausia 





4 
























Case: Complex Wizard Form 



Ingesta 

Turno rotativo mariana 

Turno rotativo tarde 

Turno rotativo noche 


Turno rotativo Libre 

Desayuno 

05:50 

08:30 

06:30 


09:00 

Tentempie 1 

08:30 

11:00 



11:00 

Tentempie 2 

12:00 





Comida 

14:30 

13:00 

14:00 

X 

14:00 

Merienda 1 

18:30 

17:00 

18:30 


17:30 

Merienda 2 


19:30 





Cena 21:50 22:30 21:50 21:50 

Recena 1 00:50 23:00 






What we need 

HTML 

$form->createView( ) ; 


API 

$mySerializer->serialize ( $ orm) ; 



What we need 

HTML 

$form->createView( ) ; 


API 

$mySerializer->serialize ( $ orm) ; 


Serialize! Ok, into which format? 



ISON Schema 



•Rf> JSON Schema 

JSON Schema 


Docs Examples Software 


JSON Schema is a vocabulary that allows you to annotate and validate JSON documents. 

Advantages 


JSON Schema 

• describes your existing data format 

• clear, human- and machine-readable 
documentation 

• complete structural validation, useful for 

o automated testing 

validating client-submitted data 


JSON Hyper-Schema 

• describes your existing API - no new structures 
required 

• links (including ^1 Templates for target URIs) 

• forms - specify a JSON Schema for the desired 
data 


O 


json-schema.org 



How does it look like 


{ 


> 


"$schema : 'http://json-schema.Org/draft-04/schema#' , 
"title": "Product" , 

"description' : A product from Acme's catalog , 

"type": "object", 
properties : { 

"name": { 

"description' : 'Name of the product , 

"type": "string" 

}, 

"price": { 

"type' : "number , 

"minimum": 0, 

"exclusiveMinimum : true 

}, 

"tags": { 

"type": "array", 

"items" : { 

"type": "string" 

}, 

minltems : 1, 

"uniquelterns : true 

> 

}, 

"required": ["id", "name", "price"] 


Definitions 

Types, 

Validation rules 


New resource: my-api/products/form 


Liform & LiformBundle 


use Limenius\Liform\Resolver; 
use Limenius\Liform\Liform; 

$resolver = new Resolver(); 

$resolver->setDefaultTransformers(); 

$ 'form = new Liform($resolver); 

$ orm = $this->createForm(CarType::class, $car, ['csr^protection' => false]) 
$schema = json_encode($liform->transform($form)); 


https://github.com/Limenius/Liform 


Transform piece by piece 

public function buildForm(FormBuilderlnterface $bui der, array $options) 

{ 

$builder 

->add('name',Type\TextType::class, [ 

'label' => 'Name', 

'required' => true, 

'attr' => ['placeholder' => 'l\'m a placeholder’]]) 

->add('description',Type\TextType::class, [ 

'label' => 'Description', 

'liform' => [ 

'widget' => 'textarea', 

'description' => 'An explanation of the task', 

]]) 

->add('dueTo',Type\DateTimeType::class, [ 

'label' => 'Due to', 

'widget' => 'single_text'] 

) 


{"title'V'task", 

li. ii ii I • .11 

type : object , 

"properties":! 

ii ii r 

name :{ 

ii. ii ii . • ii 

type : string , 

"title":"Name", 

"default":'Tm a placeholder", 
"propertyOrder": I 

}, 

"description":! 

II. IV ii . • II 

type : string , 

" wi dget": "textarea", 

"title":"Description", 

"description'V'An explanation of the task 
"propertyOrder":2 

}. 

"dueTo":{ 

ii. ii ii . • ii 

type : string , 

"title":"Due to", 

" wi dget":" d ateti m e", 

"format":"date-time", 

"propertyOrder":3 

} 

}. 

“required":[ “name", "description","dueTo"]} 


} 


Transform piece by piece 

public function buildForm(FormBuilderlnterface $bui der, array $options) 

{ 

$t£uHder_ _ 

1 ->add(' name', Type\TextType::c lass, [ 1 

| 'label' => 'Name', I". 

1 'required' => true, 1 

! 'attr' => ['placeholder' => 'l\'m a placeholder’]]) j 


->add('description',Type\TextType::class, [ 

'label' => 'Description', 

'liform' => [ 

'widget' => 'textarea', 

'description' => 'An explanation of the task', 

]]) 

->add('dueTo',Type\DateTimeType::class, [ 

'label' => 'Due to', 

'widget' => 'single_text'] 


{"title":"tasl<", 

ir ii it I • .ii 

type : object , 
"properties":! 


name"!{ 

II. ii ii 


type : string , 

"title":"Name", 

"default'VTm a placeholder", 
"propertyOrder": I 

"description":! 

II. IV iv . • II 

type : string , 

"widget'V'textarea", 

"title'V'Description", 

"description'V'An explanation of the task", 
"propertyOrder":2 

"dueTo":{ 

II. iv iv . • II 

type : string , 

"title'V'Due to", 


"widget'V'datetime", 

"format":"date-time", 

"propertyOrder":3 

} 

“required":! “name", "description","dueTo"]} 


} 










Transform piece by piece 

public function buildForm(FormBuilderlnterface $bui der, array $options) 
{ 

$t£uHder_ _ 

1 ->add(' name', Type\TextType::c lass, [ 1 

| 'label' => 'Name', I". 

1 'required' => true, 1 

! 'attr' => ['placeholder' => 'l\'m a placeholder’]]) j 


->add('description',Type\TextType::class, [ 

'label' => 'Description', 

'liform' => [ 

'widget' => 'textarea', 

'description' => 'An explanation of the task', 

]]) 


->add('dueTo',Type\DateTimeType::class, [ 
'label' => 'Due to', 

'widget' => 'single_text'] 

) 


{"title'V'task", 

li. ii ii I • .ii 

type : object , 

"properties":! 

r tr ■ 1 " h 7 - -- -- -- -- -- -- -- 

name :{ 

II. IV iv . • II 

i type : string , 

>i "title":"Name", 

1 "default'VTm a placeholder", 
j "propertyOrder": I 

^ ... 

i "description":! 

■ type : string , 

1 "widget":"textarea", 

"title":"Description", 

i "description'V'An explanation of the task", 

■ "propertyOrder":2 

B - i. .. 

"dueTo":{ 

II. iv iv . • II 

type : string , 

"title":"Due to", 

"widget":"datetime", 

"format":"date-time", 

"propertyOrder":3 

} 

“required":[ “name", "description","dueTo"]} 


} 














Transform piece by piece 

public function buildForm(FormBuilderlnterface $bui der, array $options) 

{ 

$t£uHder_ _ 

1 ->add(' name', Type\TextType::c lass, [ 1 

| 'label' => 'Name', I". 

1 'required' => true, 1 

! 'attr' => ['placeholder' => 'l\'m a placeholder’]]) j 


->add('description',Type\TextType::class, [ 

'label' => 'Description', 

'liform' => [ 

'widget' => 'textarea', 

'description' => 'An explanation of the task', 

]]) 


, ->add('dueTo',Type\DateTimeType::class, [ 
| 'label' => 'Due to', 

■ 'widget' => 'single_text'] 

_ 


{"title":"tasl<", 

ir ii it I • .ii 

type : object , 
"properties":! 


► 


name"!{ 

II. ii ii 


type : string , 
"title":"Name", 

"default'VTm a placeholder", 
"propertyOrder": I 


"description":! 

II. IV iv . • II 

type : string , 

"widget'V'textarea", 

"title'V'Description", 

"description'V'An explanation of the task", 
"propertyOrder":2 

-i . 

“tiCTeTo*! - 

II. IV IV . • II 

type : string , 

"title'V'Due to", 

"widget'V'datetime", 

"format":"date-time", 

"propertyOrder":3 

} 

\ . 

“required":! “name", "description","dueTo"]} 


} 




















Transformers 


Transformers extract information from each Form Field. 

We can extract a lot of information: 

•Default values and placeholders. 

•Field attributes. 

•Validation rules. 


Also important 


•FormView serializer for initial values. 
•Form serializer that extracts errors. 

{ "code":null, 

"message":"Validation Failed", 

ii ii r 

errors :{ 

"children":! 

ii ii r 

name :{ 

II II r 

errors :[ 

"This value should not be equal to Beetlejuice." 

] 

}. 

"description":!], 

"dueTo":[] 

} 

} 

} 


So far we have: 

$form 


Initial values 

Ul hints (widgets, attributes) 

Bind incoming data 

Deserialize 

Validate 


Return errors 


$form->createView() (helpers in other Fws not Sf) 

Render view 

On Submit validation 

Some client-side validation (HTML5) 

On blur sync validation 
On blur async validation 
All the dynamic goodies 




















Form Server 


API docs 



$form 


Liform 


►Json-schema 






Leverage json-schema: Validators 


let valid = ajv.validate(schema, data) 
if (Ivalid) console.log(ajv.errors) 


https://github.com/epoberezkin/ajv 


Leverage ison-scnema: Form generators 


• mozilla/react-jsonschema-form: React. 

• limenius/liform-react: React + Redux; integrated with redux-form 
(we V redux-form). 

• ... 


Creating our own generator is not so difficult (you typically only 
need all the widgets, only a subset) 


liform-react 


By using redux-form we can: 

• Have sane and powerful representation of state in Redux. 

• Integrate on-blur validation, async validation & on Submit 
validation. 

• Define our own widgets/themes. 

• Know from the beginning that it is flexible enough. 


liform-react 


import React from react 

import { createStore, combineReducers } from redux' 
import { reducer as formReducer } from redux-form 
import { Provider } from react-redux' 
import Liform from liform-react' 

const MyForm =()=>{ 

const reducer = combineReducers({ form: formReducer }) 
const store = createStore(reducer) 
const schema = { 

//... 

} 

} 

return ( 

<Provider store={store}> 

CLiform schema={ schema} onSubmit={ (v) => {console. log(v)} }/> 

</Provider> 

) 

} 


liform-react 


"properties": { 

"name": { 

"title":"Task name", 
"type":"string", 
"minLength": 2 

}, 

"description": { 

"title":"Description 
"type":"string", 
"widget":"textarea" 

}, 

"dueTo": { 

"title":"Due to", 
"type":"string", 
"widget":"datetime", 
"format":"date-time" 

} 

}, 

"required":["name"] 


Task name 




Due to 


dd/mm/yyyy, — 



February 2017 ▼ « • . ► 


Mon 

Tue 

Wed 

Thu 

Fri 

Sat 

Sun 



1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 

21 

22 

23 

24 

25 

26 

27 

28 







r 

Submit 

L_ 







Form Server API docs 


$form 


Liform 


►Json-schema 


^ Form Client 


■►React form 


liform-react 







$form 



Initial values 

Ul hints (widgets, attributes) 

Bind incoming data 

Deserialize 

Validate 


Return errors 


$form->createView() 


Render view 

On Submit validation 

Some client-side validation (HTML5) 

On blur sync validation 
On blur async validation 
All the dynamic goodies 


























https://github.com/Limenius/symfony-react-sandbox 


Example with 

• Webpack 

• ReactRenderer/ReactBundle 

• Liform/LiformBudle & liform-react 


wcast.ccrm 

|H. £*■ r k nj| 




Thanks! 


@nacmartin 

nacho@limenius.com 

Limenius 

http://limenius.com 
Formation, Consulting and 

Development. 

























